<template>
	<view class="contentbox" :style="'height:'+headHeight+'px;'">
		<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'" @click="goBack">
			<image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
		</view>
		<view class="row-login">
			<image class="order-bg" mode="widthFix" :src="imageUrl +'list/log-bg.jpg'"></image>
			<view class="wp">
				<view class="m-login">
					<image class="logo" mode="widthFix" :src="imageUrl +'list/log-logo.png'"></image>

					<view class="form-container">
						<h1>手机号登录</h1>
						<u-form style="margin-top: 50px" labelPosition="left" ref="form">
							<u-form-item label-width="60" label="手机号" prop="mobile" ref="item">
								<u-input v-model="phone" border="bottom" placeholder="请输入手机号" maxlength="11" type="number">
								</u-input>
							</u-form-item>
							<u-form-item label-width="60" label="验证码" prop="yzm" ref="item">
								<u-input v-model="code" border="bottom" placeholder="请输入验证码" type="number">
								</u-input>
								<view class="wrap">
									<u-button @click="sendCode" :disabled="!canSend" type="primary" size="small">
										{{ canSend ? '获取验证码' : `${time}` }}
									</u-button>
									<u-code :seconds="300" ref="uCode" @change="codeChange" color="#fff" background="#00BBFF"
										size="28rpx"></u-code>
								</view>
							</u-form-item>
						</u-form>

						<view class="checkbox btn-login">
							<label>
								<checkbox-group @change="onChange">
									<checkbox :checked="state" color="#fff" style="transform:scale(0.7)" />
								</checkbox-group>
								<view class="right">
									我已阅读并同意
									<view @click="goNext('/pages/privacyProtection/privacyProtection')" class="a">
										《用户隐私服务条款》
									</view>
									和
									<view @click="goNext('/pages/helpInstructions/helpInstructions')" class="a">《服务条款》</view>
									，若手机号未注册将为您注册账户。
								</view>
							</label>
						</view>

						<button type="primary" class="btn-login" @click="goRegister">登录</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "../../api/myHttps";

	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0,

				state: false,
				phone: '',
				code: '',
				tips: '',
				canSend: true,
				time: 0,
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20
		},
		methods: {
			sendCode() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				this.canSend = false
				this.$refs.uCode.start()
				// 发送验证码请求
				post('/city-mobile/user/smsCode/eulb?phone=' + this.phone).then(() => {
					uni.showToast({
						title: '验证码已发送'
					})
				}).catch(err => {
					this.canSend = true
					this.$refs.uCode.stop()
				})
			},
			codeChange(val) {
				// console.log(val);
				this.time = val
				let match = val.match(/^(\d+)秒/);
				let num = match ? match[1] : 0;
				if (num == 0) {
					this.canSend = true
				}
			},
			goRegister() {
				if (!this.state) {
					uni.showToast({
						title: '请同意用户隐私服务条款',
						icon: 'none'
					})
					return
				}
				post('/city-mobile/eulbCode', {
					phone: this.phone,
					code: this.code,
					ownerId: uni.getStorageSync("ownerId"),
				}).then((res) => {
					uni.setStorageSync("phone", this.phone);
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
			},
			submit() {

			},
			onChange() {
				this.state = !this.state;
			},
			goNext(uri) {
				uni.navigateTo({
					url: uri
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.form-container {
		height: 30vh;
		padding: 40rpx 35rpx 26rpx;

		h1 {
			font-size: 50rpx;
			font-weight: 700;
		}

		.u-form-item__body__right__content__slot {
			flex-direction: row;
		}

		.wrap {
			display: inline-block;
			width: 200rpx;
			margin-right: 40rpx !important;

			.u-button--normal.data-v-2bf0e569 {
				font-size: 24rpx;
			}
		}

		.btn-login {
			margin-top: 30rpx;
		}
	}

	.contentbox {
		width: 750rpx;
		position: relative;
		z-index: 999;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.title-names {
				width: 750rpx;
				position: absolute;
				text-align: center;
			}

			.logo {
				margin-left: 18rpx;
				width: 40rpx;
				height: 40rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	/deep/ .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: transparent !important;
		background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;
	}

	/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
		border-color: transparent !important;
		background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;

	}

	/deep/ .uni-checkbox-input {
		/* width: 32rpx!important;
  height: 32rpx!important; */
		border-radius: 50% !important;
		overflow: hidden !important;
	}

	/deep/ .wx-checkbox-input {
		/* width: 32rpx!important;
  height: 32rpx!important; */
		border-radius: 50% !important;
		overflow: hidden !important;

	}
</style>
